<template>
    <div class="newNodeExecutors-center" style="display: flex" v-if="newNodeExecutors.length==1">
        <div style="margin: 0.5rem 0rem 0.5rem 0.5rem"><radio value="r1" checked="true" /></div>
        <div style="flex: 1;">
            <div class="bpm-direction-name">{{ newNodeExecutors[0].nodeName }}</div>
            <div class="bpm-direction-center">
                <div class="bpm-center" v-if="newNodeExecutors[0].nodeType=='UserTask' ">
                    <div
                        v-if=" newNodeExecutors[0].users.length>0 ||  (newNodeExecutors[0].users.length==0 && (!newNodeExecutors[0].groups || newNodeExecutors[0].groups.length==0)) ">
                        <span class="bpm-center-name">{{i18n('user','用户')}}</span>
                        <RxVueUserDialog v-model="newNodeExecutors[0].users" :organization="true" :filter="newNodeExecutors[0].userFilter"></RxVueUserDialog>
                    </div>
                    <div v-else class="bpm-task-executors-tag">
                        <RxVueGroupDialog v-model="newNodeExecutors[0].groups" :filter="newNodeExecutors[0].groupFilter"></RxVueGroupDialog>
                    </div>
                </div>
                <div v-else>
                    <div v-for="(subNodeExe,index) in newNodeExecutors[0].outcomeNodeUsers" :key="index">
                        <div style="font-size: 0.8rem">{{ subNodeExe.nodeName }}</div>
                        <div v-if="subNodeExe.nodeType=='UserTask' ">
                            <!-- 用户  -->
                            <div
                                v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) ">
                                <span class="bpm-center-name">{{i18n('user','用户')}}</span>
                                <RxVueUserDialog v-model="subNodeExe.users" :organization="true"  :filter="subNodeExe.userFilter"></RxVueUserDialog>
                            </div>
                            <!-- 部门  -->
                            <div v-else>
                                <RxVueGroupDialog v-model="subNodeExe.groups"  :filter="subNodeExe.groupFilter"></RxVueGroupDialog>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--多个节点-->
    <div class="newNodeExecutors-center" v-else>
        <div class="bpm-newNodeExecutors" v-for="(node,idx) in newNodeExecutors" :key="node.nodeId">
            <div style="margin-right: 10px">
                <radio :checked="node.selected" @click.stop="onChange(idx)"></radio>
            </div>
            <div>
                <div class="bpm-direction-nodeName">{{ node.nodeName }}</div>
                <div v-if="node.nodeType=='UserTask' ">
                    <div
                        v-if="node.users.length>0 ||  (node.users.length==0 && (!node.groups || node.groups.length==0)) ">
                        <span class="bpm-center-name">{{i18n('user','用户')}}</span>
                        <RxVueUserDialog
                            v-model="node.users"
                            :organization="true"
                            :single="node.single"
                            :filter="node.userFilter"
                            :readonly="!node.allowSelectExecutor || node.multipleType=='batch'">
                        </RxVueUserDialog>
                    </div>
                    <div v-else>
                        <span class="bpm-center-name">{{i18n('group','部门')}}</span>
                        <RxVueGroupDialog v-model="node.groups"
                                          :organization="true"
                                          :single="node.single"
                                          :filter="node.userFilter"
                                          :readonly="!node.allowSelectExecutor || node.multipleType=='batch'">

                        </RxVueGroupDialog>
                    </div>
                </div>
                <div v-else>
                    <div v-for="subNodeExe in node.outcomeNodeUsers">
                        <span>{{ subNodeExe.nodeName }}</span>
                        <div v-if="subNodeExe.nodeType=='UserTask' ">
                            <!-- 用户  -->
                            <div
                                v-if="subNodeExe.users.length>0 ||  (subNodeExe.users.length==0 && (!subNodeExe.groups || subNodeExe.groups.length==0)) ">
                                <RxVueUserDialog v-model="subNodeExe.users" :organization="true"
                                                 :single="subNodeExe.single"
                                                 :filter="subNodeExe.userFilter"
                                                 :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'"></RxVueUserDialog>
                            </div>
                            <!-- 部门  -->
                            <div v-else>
                                <RxVueGroupDialog v-model="subNodeExe.groups"
                                                  :organization="true"
                                                  single="subNodeExe.single"
                                                  :filter="subNodeExe.groupFilter"
                                                  :readonly="!subNodeExe.allowSelectExecutor || subNodeExe.multipleType=='batch'">
                                </RxVueGroupDialog>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RxVueUserDialog from '@/components/RxVueUserDialog';
import RxVueGroupDialog from '@/components/RxVueGroupDialog';
import Util from '@/js/Util.js'

export default {
    name: "BpmTaskExecutors",
    components: {
        RxVueUserDialog,
        RxVueGroupDialog
    },
    props: {
        nodeExecutors: {
            type: Object, default: () => {
            }
        },
    },
    data() {
        return {
            newNodeExecutors: [],
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTaskLang.BpmInstTakeBack",key);
        },
        onChange(e) {
            var len = this.newNodeExecutors.length;
            for (var i = 0; i < len; i++) {
                var obj = this.newNodeExecutors[i];
                var val = e;
                obj.selected = val == i;
            }
        },
        convertLocal() {
            if (this.newNodeExecutors) {
                for (var i = 0; i < this.newNodeExecutors.length; i++) {
                    var o = this.newNodeExecutors[i];
                    if (o.selected == undefined) {
                        o.selected = i == 0;
                    }
                    this.convertLocalRow(o);
                }
            }
        },
        convertLocalRow(o) {
            if (o.nodeType == "UserTask") {
                this.convertToLocalExecutors(o);
            } else if (o.nodeType.indexOf("Gateway") || o.nodeType.indexOf("SubProcess")) {
                var rows = o.outcomeNodeUsers;
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    this.convertToLocalExecutors(row);
                }
            }
        },
        convertToLocalExecutors(o) {
            var users = [];
            var groups = [];
            var executors = o.executors;
            if(!executors){
                return
            }
            for (var i = 0; i < executors.length; i++) {
                var executor = executors[i];
                if (executor.type == 'user') {
                    users.push(executor);
                } else {
                    groups.push(executor);
                }
            }
            o.users = users;
            o.groups = groups;
        },
        getDestNodeId() {
            if (this.newNodeExecutors.length == 1) {
                if (this.taskConfig && this.taskConfig.nextHandMode && this.taskConfig.nextHandMode == "condition") {
                    return this.newNodeExecutors[0].nodeId;
                }
                return "";
            }
            var nodeId = "";
            this.newNodeExecutors.forEach(item => {
                if (item.selected) {
                    nodeId = item.nodeId;
                }
            })
            return nodeId;
        },
        getNodeUserMap() {
            this.convertData();
            let nodeUserMap = {}
            this.newNodeExecutors.forEach(item => {
                if (item.nodeType == "UserTask" && item.executors && item.executors.length > 0 && item.selected) {
                    nodeUserMap[item.nodeId] = item.executors
                }
                if (item.outcomeNodeUsers && item.outcomeNodeUsers.length > 0) {
                    for (let i = 0; i < item.outcomeNodeUsers.length; i++) {
                        var obj = item.outcomeNodeUsers[i];
                        if (obj.nodeType == "UserTask" && obj.executors && obj.executors.length > 0 && item.selected) {
                            nodeUserMap[obj.nodeId] = obj.executors
                        }
                    }
                }
            })
            return nodeUserMap;
        },
        convertData() {
            for (var i = 0; i < this.newNodeExecutors.length; i++) {
                var o = this.newNodeExecutors[i];

                if (o.nodeType == "UserTask") {
                    this.convertUsers(o);
                } else if (o.nodeType.indexOf("Gateway") != -1 || o.nodeType.indexOf("SubProcess") != -1) {
                    var rows = o.outcomeNodeUsers;
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if (row.nodeType == "UserTask") {
                            this.convertUsers(row);
                        }
                    }
                }
            }
        },
        convertUsers(o) {
            delete o.executors;
            var executors = [];

            if (o.users) {
                for (var i = 0; i < o.users.length; i++) {
                    var user = o.users[i];
                    user.type = "user";
                    executors.push(user);
                }
            }

            if (o.groups) {
                for (var i = 0; i < o.groups.length; i++) {
                    var group = o.groups[i];
                    group.type = "group";
                    executors.push(group);
                }
            }

            o.executors = executors;
        },
    },
    watch: {
        nodeExecutors: {
            handler() {
                this.newNodeExecutors = Util.deepClone(this.nodeExecutors);
                this.convertLocal();
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.newNodeExecutors-center{
    border-top: 1px solid rgba(232, 232, 232, 1);
}
.bpm-direction-name {
    color: rgba(0, 0, 0, 0.85);
    padding:0.5rem 0.5rem 0rem 0.5rem;
}
.bpm-direction-nodeName{
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 0.5rem;
}

.bpm-direction-center {
    display: flex;
    padding: 0.5rem;
}

.bpm-center {
    flex: 1;
}

.bpm-center-name {
    font-size: 0.8rem;
    display: block;
    margin-bottom: 10px;
}

.bpm-newNodeExecutors {
    display: flex;
    padding: 0.5rem;
    border-bottom: 1px solid  #f4f5f6;
}

.bpm-newNodeExecutors:last-child {
    border-bottom: none;
}
</style>
